import './ViewTab.scss'

import * as React from 'react'
import * as Antd from 'antd'
import { Icon } from 'antd'

interface Props {
  view: any
  removeView: any
}

export default ({ view, removeView }: Props) => {
  const removeTheView = (evt) => {
    evt.preventDefault();
    removeView(view);
  }

  return (
    <a className={`view-tab ${view.isActive ? 'is-active' : ''}`} href={view.path}>
      <div className="view-tab__inner">
        <span className="view-tab__text break-no">{view.text}</span>
        <Antd.Icon type="close" onClick={removeTheView}></Antd.Icon>
      </div>
    </a>
  );
}
